css中常用的两种颜色表示方式分别是rgb和十六进制两种，有时候可能特殊需要，要将获取到的rgb颜色转换为十六进制，反之也有这种情况。网上这种颜色转换工具比较少，于是本人就开发了这么一个小工具，方便使用，并将代码分享给大家。
先上效果图：
工具地址：http://oohy4f8bb.bkt.clouddn.com/colorExchange.html
代码实现
原生js获取DOM对象、绑定事件
js正则表达式校验用户输入
parseInt(,16)16进制转10进制
num.toString(16)10进制转16进制
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rgb与十六进制颜色转换</title>
<style>
*{
font-family: "微软雅黑";
box-sizing:border-box;
}
html,body,.page{
height:100%;
margin:0px;
}
.page{
background:url(http://ol435r2l8.bkt.clouddn.com/background.jpg) no-repeat center /100%;
}
.main{
width: 751px;
height: 100%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.81);
}
.header{
text-align: center;
height: 46px;
line-height: 46px;
font-size: 26px;
background-color: #5cdc85;
color: #fff;
border-radius: 0px;
box-shadow: 0px 8px 5px #b5b5b5;
}
.content{
margin: 50px 10px;
}
input{
height:35px;
width:200px;
outline:0;
border:1px solid #EEEEEE;
padding:5px;
}
input.rgb{
width:50px;
}
.btn{
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
background: #55aae2;
color: #fff;
border-radius: 3px;
cursor:pointer;
}
#rgbOutput,#hexOutput{
color: rgb(191, 9, 244);
font-size: 16px;
font-weight: 600;
}
#rgbColor,#hexColor{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
margin-left: 60px;
}
</style>
</head>
<body>
<div class="page">
<div class="main">
<header>
<div class="header">颜色代码转换</div>
</header>
<div class="content">
<p>
<span>十六进制颜色：</span>
<input id="i-hexcode" type="text" placeholder="填写16进制颜色 如：#FFFFFF">
<span class="btn" id="16torgb">转换</span>
</p>
<p id="o-rgbcode">
<span id="rgbOutput"></span>
<span id="rgbColor"></span>
</p>
<p style="margin-top: 30px;">
<span>RGB颜色：</span>
<input id="i-rgbcodeR" type="text" class="rgb">
<input id="i-rgbcodeG" type="text" class="rgb">
<input id="i-rgbcodeB" type="text" class="rgb">
<span class="btn" id="rgbto16">转换</span>
</p>
<p id="o-hexcode">
<span id="hexOutput"></span>
<span id="hexColor"></span>
</p>
</div>
</div>
</div>
<script>
//颜色值输入区域
var i_hexcode = document.getElementById("i-hexcode");
var i_rgbcodeR = document.getElementById("i-rgbcodeR");
var i_rgbcodeG = document.getElementById("i-rgbcodeG");
var i_rgbcodeB = document.getElementById("i-rgbcodeB");
//颜色值输出区域
var rgbOutput = document.getElementById("rgbOutput");
var rgbColor = document.getElementById("rgbColor");
var hexOutput = document.getElementById("hexOutput");
var hexColor = document.getElementById("hexColor");
//16进制转rgb转换按钮
var _16torgb = document.getElementById("16torgb");
//rgb转16进制转换按钮
var rgbto16 = document.getElementById("rgbto16");
//校验16进制颜色值正则表达式
var reg = /^#([0-9a-fA-F]{6}[0-9a-fA-F]{3})$/;
//校验rgb颜色值只能输入整数且最多三位数字
var regRgb = /^[0-9]{1,3}$/;
//为按钮注册点击事件
_16torgb.addEventListener("click",sixteenToRgb);
rgbto16.addEventListener("click",rgbToSixteen);
/**
* 16toRgb颜色转换
*/
function sixteenToRgb(){
var hexValue = i_hexcode.value;
//首先校验用户填写的代码是否正确
if(!reg.test(hexValue)){
alert("颜色值输入有误请检查！");
}else{
var codeValue = hexValue.replace("#",'');
var rgbStr = "";
if(codeValue.length==6){
var decR = parseInt(codeValue.slice(0,2),16);
var decG = parseInt(codeValue.slice(2,4),16);
var decB = parseInt(codeValue.slice(4,6),16);
rgbStr = decR+','+decG+','+decB;
}else{
var decR = codeValue.slice(0,1);
var decG = codeValue.slice(1,2);
var decB = codeValue.slice(2,3);
decR = parseInt(decR+decR,16);
decG = parseInt(decG+decG,16);
decB = parseInt(decB+decB,16);
rgbStr = decR+','+decG+','+decB;
}
rgbOutput.innerText = rgbStr;
rgbColor.style.background = "rgb("+rgbStr+")";
}
}
/**
* rgbto16颜色转换
*/
function rgbToSixteen(){
var rgbValueR = i_rgbcodeR.value;
var rgbValueG = i_rgbcodeG.value;
var rgbValueB = i_rgbcodeB.value;
//首先校验用户填写的代码是否正确
if((!regRgb.test(rgbValueR)rgbValueR>255)(!regRgb.test(rgbValueG)rgbValueG>255)(!regRgb.test(rgbValueB)rgbValueB>255)){
alert("颜色值输入有误请检查！");
}else{
var rgbValueR = parseInt(rgbValueR);
var rgbValueG = parseInt(rgbValueG);
var rgbValueB = parseInt(rgbValueB);
var rToHex = rgbValueR.toString(16);
var gToHex = rgbValueG.toString(16);
var bToHex = rgbValueB.toString(16);
if(rToHex.length==1){
rToHex = "0"+rToHex;
}
if(gToHex.length==1){
gToHex = "0"+gToHex;
}
if(bToHex.length==1){
bToHex = "0"+bToHex;
}
hexOutput.innerText = "#"+rToHex+gToHex+bToHex;
hexColor.style.background = "#"+rToHex+gToHex+bToHex;
}
}
</script>
</body>
</html>
